<template>
  <fieldset>
    <legend align="left"><img src="../../../assets/image/dream/梦想.png" style="width:200px;height: 70px;" /></legend>
    <!-- 上方div -->
    <div class="crowdFunding-top">
      <!-- 选择弹出框 -->
      <div style="width: 18%;height: 100%;float: right;position: relative;top: -20%; border: 1px solid white;">
        <div>
          梦想
          <hr />
          选择标签查看：
        </div>
        <el-button @click="drawer = true" type="warning" style="margin-left: 16px;">按标签选择查看</el-button>
      </div>
      <!-- 刷新按钮 -->
      <div @click="pushDreamImg" class="crowdFunding-top-button" title="刷新查看其它"></div>
      <!-- 上方图片，每次显示三个，点击刷新 -->
      <div
        v-for="(item, index) of data"
        :key="index"
        v-if="index == imgDisplay[0] || index == imgDisplay[1] || index == imgDisplay[2]"
        style="width: 20%;height: 80%; float: left;margin-top: 1%;"
      >
        <!-- 三个小图标和文字 -->
        <div @click="imgSelect" :data-i="index" class="crowdFunding-top-img" style="width: 100%;height: 100%;">
          <img :src="item.dreamImage" style="width: 80%;height: 100%; " :data-i="index" />
          <div v-if="index != Selectindex" class="crowdFunding-top-shadow" :data-i="index">
            <p style="font-size: 5px;color: white;position: relative;top: 35%;" :data-i="index">{{ item.dreamName}}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 下方div -->
    <div class="crowdFunding-bottom">
      <!-- 大图展示 -->
      <div style="width:40%;height: 75%;top:5%;left: 10%;position: relative;background-color: rgba(255,255,255,1);box-shadow:10px 10px 10px 5px #888888 ;float: left;">
        <img :src="this.data[Selectindex].dreamImage" style="width: 95%;height: 95%;box-shadow:10px 5px 5px 5px #888888 ;margin: 1% 0 0 1%;" />
      </div>
      <!-- 文字和按钮 -->
      <div style="margin-left: 5%;width: 45%;height: 75%;position: relative;left: 48%;top:5%; ">
        <!-- 标题及id -->
        <div style="width: 80%;height: 20%;position: relative; bottom: 95%; text-align:left;">
          <h2 style="color:white;">{{ this.data[Selectindex].dreamName.substr(0, 14) + '...' }}</h2>
          <p style="font-size: 5px;color: white;">该活动id：{{ this.data[Selectindex].dreamId }}</p>
        </div>
        <!-- 详情内容 -->
        <div style="width: 80%;height: 40%;position: relative; bottom: 80%;font-size: 15px;text-align: left; color: #000000;">
          {{ this.data[Selectindex].dreamIntroduce.substr(0, 100) + '...' }}
        </div>
        <!-- 标签 -->
        <div style="position: relative;width: 40%;height: 10%; bottom: 52%;left:0;float: left;">
          <el-tag v-if="this.data[Selectindex].dreamTag1 == 1" style="float: left;">个人</el-tag>
          <el-tag v-if="this.data[Selectindex].dreamTag2 == 1" type="warning" style="float: left;">群体</el-tag>
          <el-tag v-if="this.data[Selectindex].dreamTag3 == 1" type="success" style="float: left;">学生</el-tag>
          <el-tag v-if="this.data[Selectindex].dreamTag4 == 1" type="success" style="float: left;">其它</el-tag>
        </div>
        <!-- 认证情况 -->

        <div style="width: 80%;height: 10%;font-size: 5px;text-align: left;position: relative;bottom: 40%; float: left;">
          <div style="float: left;margin-top: 5px;">认证：</div>
          <!-- 显示已认证 -->
          <div v-if="this.data[Selectindex].dreamAuthentication == 1" style="color: #2680f0;float: left;">
            <img src="../../../assets/image/dream/认证.png" style="float: left;" />
            <div style="float: left;margin-top:5px ;">已经过认证</div>
          </div>
          <!-- 显示未验证 -->
          <div v-else style="color: red;">
            <img src="../../../assets/image/dream/未认证.png" style="float: left;" />
            <div style="float: left;margin-top:5px ;">该活动尚未认证，请谨慎对待</div>
          </div>
        </div>
        <div style="width: 85%;height: 5%;text-align: left;position: relative;bottom: 37%;">
          <div style="float: left;margin-right: 50%;">已完成情况：{{ this.data[Selectindex].dreamAlreadyAmount }}/ {{ this.data[Selectindex].dreamTotalAmount }}</div>
          <el-progress :percentage="(this.data[Selectindex].dreamAlreadyAmount / this.data[Selectindex].dreamTotalAmount) * 100" :format="format"></el-progress>
        </div>
        <!-- 点击跳转详情 -->
        <div style="width: 80%;height: 5%;position: relative;bottom: 27%;left: 25%;"><el-button type="primary" @click="dialog">查看详情</el-button></div>
      </div>
      <el-dialog
        :visible.sync="dialogVisible"
        :fullscreen="true"
        :append-to-body="true"
        :destroy-on-close="true"
        >
        <dream-details v-bind:dreamId="this.data[Selectindex].dreamId"></dream-details>
        </el-dialog>
    </div>
    <!-- 弹出的标签选择框 -->
    <el-drawer :visible.sync="drawer" :direction="direction" :append-to-body="appendToBody" :modal-append-to-body="modalAppendToBody">
      符合条件的梦想活动共有：{{ dreamlength }}条
      <div class="box">
        <p class="yx">
          已选条件
          <span v-for="(item, index) in yxx" :key="index">{{ item }}</span>
        </p>
        <p>
          标签选项
          <span :class="{ active: item.beal }" @click="zzk(index)" v-for="(item, index) in zz" :key="index">{{ item.name }}</span>
        </p>
      </div>
    </el-drawer>

  </fieldset>
</template>

<script>
  import dreamDetails from './details/dreamDetails.vue';
	import { getDream } from 'network/dream.js';
let cun1 = '';
export default {
  data() {
    return {
      //详情弹出
      dialogVisible: false,
      // 弹出框
      yxx: ['个人', '群体', '学生','其它'],
      zz: [{ name: '个人', beal: true }, { name: '群体', beal: true }, { name: '学生', beal: true },{ name: '其它', beal: true }],
      value1: '',
      dreamlength: '',
      // 弹出框点击按钮
      appendToBody: true,
      modalAppendToBody: true,
      drawer: false,
      direction: 'rtl',
      // 显示相关
      imgDisplay: [0, 1, 2],
      Selectindex: 0,
      data: []
    };
  },
  created() {
	this.getDreamlist()
  },
  components:{
    dreamDetails
  },
  mounted() {

    this.dreamlength = this.data.length;
  },
  methods: {
	  getDreamlist(){
		  getDream().then(res=>{
			this.data=res
			this.dreamlength=this.data.length
		  }) .catch(err => {
          console.log(err);
        });
	  },
    //跳转详情相关
    dialog(){
      this.dialogVisible=true
    },
    //选中显示，默认第一个
    imgSelect(e) {
      let i = e.target.dataset.i;
      this.Selectindex = i;
    },
    // 刷新当前展示的梦想
    pushDreamImg() {
      let length = 0;
      let dataArr = [];
      let dataArr2 = [];
      let pushArr = [];
      // data长度
      for (let i = 0; i < this.data.length; i++) {
        dataArr[length] = length;
        length++;
      }
      //遍历筛选是否符合标签
      for (let count = 0; count < length; count++) {
        if (
          (this.zz[0].beal == true && this.data[count].dreamTag1 == 1) ||
          (this.zz[1].beal == true && this.data[count].dreamTag2 == 1) ||
          (this.zz[2].beal == true && this.data[count].dreamTag3 == 1) ||
          (this.zz[3].beal == true && this.data[count].dreamTag4 == 1)
        ) {
          dataArr2.push(dataArr[count]);
        }
      }
      this.dreamlength = dataArr2.length;
      // 随机刷新
      for (let j = 0; j < 3; j++) {
        let push = Math.floor(Math.random() * dataArr2.length);
        pushArr.push(dataArr2[push]);
        dataArr2.splice(push, 1);
      }
      //排序
      pushArr = pushArr.sort();
      //显示
      this.imgDisplay = pushArr;
      //选中第一个
      this.Selectindex = this.imgDisplay[0];
    },
    //进度条
    format(percentage) {
      return percentage === 100 ? '已完成' : `${percentage.toFixed(1)}%`;
    },
    // 弹出框
    zzk(e) {
      this.zz[e].beal = !this.zz[e].beal; //点击后改变状态
      if (this.zz[e].beal == true) {
        this.yxx.push(this.zz[e].name); //如果点击后是true那么直接添加
      } else {
        //如果不是true的话说明这个标签已经存在了，那么就要查找然后删除
        var index = this.yxx.map(item => item).indexOf(this.zz[e].name);
        if (index != -1) {
          this.yxx.splice(index, 1);
        }
        if (this.yxx.length == 0) {
          this.zz[e].beal = !this.zz[e].beal;
          this.yxx.push(this.zz[e].name);
        }
      }
      this.pushDreamImg();
    }
  }
};
</script>

<style scoped>
/* 边框 */
fieldset {
  width: 85%;
  height: 85%;
  margin-bottom: 5%;
  background-color: rgba(246, 246, 246, 0.5);
  border: 1px solid #cbcbc1;
}

/* 上下部分大小 */
.crowdFunding-top {
  height: 20%;
  position: relative;
  top: -3%;
}
.crowdFunding-bottom {
  height: 80%;
}
/* 上方图片 */
.crowdFunding-top-img:hover {
  cursor: pointer;
  color: rgba(0, 0, 0, 0);
}
.crowdFunding-top-shadow {
  width: 80%;
  height: 100%;
  z-index: 5;
  left: 10%;
  top: -105%;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
}
.crowdFunding-top-shadow:hover {
  background-color: rgba(0, 0, 0, 0);
}

/* 刷新按钮 */
.crowdFunding-top-button {
  width: 3%;
  height: 25%;
  margin-top: 5%;
  margin-left: 15%;
  float: left;
  background-image: url(../../../assets/image/dream/刷新.png);
  background-size: 100% 100%;
}
.crowdFunding-top-button:hover {
  cursor: pointer;
  transform: scale(1.1);
  content: attr(title);
}
.crowdFunding-top-button:active {
  animation: 0.3s rotatefresh 1;
}
@keyframes rotatefresh {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
    transition-duration: 0.3s;
    transition: 0.3s;
  }
}
/* 弹出框 */
.box {
  text-align: left;
}
.box p {
  margin-top: 10px;
  color: #2074a5;
  font-size: 14px;
}
.box p span {
  display: inline-block;
  padding: 0 10px;
  height: 20px;
  line-height: 20px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 4px 0px rgba(141, 141, 141, 0.3);
  border-radius: 4px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(34, 34, 34, 1);
  margin-left: 10px;
  cursor: pointer;
  min-width: 44px;
  text-align: center;
}
.box span.active {
  background: rgba(0, 197, 255, 1);
  color: #fff;
}
.box p.yx {
  color: #222;
}
.box p.yx span {
  display: inline-block;
  padding: 0 15px;
  height: 20px;
  line-height: 18px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 197, 255, 1);
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  cursor: default;
  color: rgba(34, 34, 34, 1);
}
</style>
